// 引入threejs
import * as THREE from "three"

// 创建一个三维场景 scene
const scene = new THREE.Scene();
// 给三维场景添加物体
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 材质
const material = new THREE.MeshBasicMaterial({
    color: "blue",
});
//网格模型 标识生活中的物体
const mesh=new THREE.Mesh(geometry, material);
mesh.position.set(0,10,0);
// 把mesh物体添加到场景scene中
scene.add(mesh);
console.log('mesh',mesh);

// 定义相机输出画布的大小
const width=800;
const height=600;
// 设置相机的四个参数

// 创建一个透视投影相机对象
const camera=new THREE.PerspectiveCamera(50,width/height,0.1,2000);
// 设置相机的对象
camera.position.set(200,200,200);
// 相机的视线 观察目标点的坐标
// camera.lookAt(0,0,0); //目标原点
// camera.lookAt(0,y,0); //目标Y轴上一点
camera.lookAt(mesh.position);

// 创建一个WEBGL渲染器
const renderer=new THREE.WebGLRenderer();
renderer.setSize(width,height);
renderer.render(scene,camera);
// document.body.appendChild(renderer.domElement);
document.getElementById("webgl").appendChild(renderer.domElement);